<template>
  <div class="bar-chart-container">
    <div class="chart-header">
    </div>
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import { FlightApi } from '@/api/flight'
import { ElMessage } from 'element-plus'

// 图表相关
const chartRef = ref(null)
let chartInstance = null

// 数据相关
const aircraftStats = ref([])
const loading = ref(false)

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return

  chartInstance = echarts.init(chartRef.value)
  updateChart()
  window.addEventListener('resize', resizeChart)
}

// 获取飞机机型统计数据
const fetchAircraftStats = async () => {
  try {
    loading.value = true
    const response = await FlightApi.getFlightPlanes(1, 1000)

    const statsMap = {}
    response.data.forEach(item => {
      const aircraftType = item.CFTP || '未知机型'
      statsMap[aircraftType] = (statsMap[aircraftType] || 0) + 1
    })

    // 只保留前10种机型
    aircraftStats.value = Object.entries(statsMap)
      .map(([aircraftType, count]) => ({ aircraftType, count }))
      .sort((a, b) => b.count - a.count)
      .slice(0, 10)

    if (chartInstance) {
      updateChart()
    } else {
      initChart()
    }
  } catch (error) {
    ElMessage.error('获取飞机机型数据失败: ' + error.message)
    console.error('获取飞机机型数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 更新图表数据
const updateChart = () => {
  if (!chartInstance) return

  const option = {
    title: {
      text: '飞机机型分布统计 (Top 10)',
      left: 'center',
      textStyle: {
        fontSize: 18,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: aircraftStats.value.map(item => item.aircraftType),
      axisLabel: {
        interval: 0,
        rotate: 30
      }
    },
    yAxis: {
      type: 'value',
      name: '数量'
    },
    series: [
      {
        name: '飞机数量',
        type: 'bar',
        data: aircraftStats.value.map(item => item.count),
        itemStyle: {
          color: '#3a8ee6' // 统一使用Element Plus的主蓝色
        },
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.1)' // 调淡背景色
        },
        label: {
          show: true,
          position: 'top',
          color: '#333' // 统一标签颜色
        },
        emphasis: { // 添加悬停效果
          itemStyle: {
            color: '#1e63b3' // 悬停时使用深一点的蓝色
          }
        }
      }
    ]
  }

  chartInstance.setOption(option)
}

// 调整图表大小
const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

onMounted(() => {
  fetchAircraftStats()
})

onBeforeUnmount(() => {
  if (chartInstance) {
    window.removeEventListener('resize', resizeChart)
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

<style scoped>
.bar-chart-container {
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-picker {
  width: 350px;
}

@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .search-bar {
    width: 100%;
  }

  .date-picker {
    width: 100%;
  }

  .action-button {
    width: 100%;
  }
}
</style>
